<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
   <!-- 顶部-->
    <div id="nav">
        <p><a href="#">好的生活，没有那么贵</a></p>
        <ul>
            <li><a href="#">登陆&nbsp;&nbsp;</a></li>
            <li><a href="#">注册&nbsp;&nbsp;|</a></li>
            <li><a href="#">严选态度&nbsp;&nbsp;|</a></li>
            <li><a href="#">企业采购&nbsp;&nbsp;|</a></li>
            <li><a href="#">客户服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
            <span id="nav_x"></span>
        </ul>
    </div>
    <!--logo-->
    <div id="logo">
        <div id="logo_a"></div>
        <div id="logo_b">
            <input type="text">
            <span></span>
        </div>
        <span></span>
    </div>
    <!--详细导航-->
   <div id="nav_details">
       <ul>
           <li><a href="">首页</a></li>
           <li><a href="">居家</a></li>
           <li><a href="">餐厨</a></li>
           <li><a href="">配件</a></li>
           <li><a href="">服装</a></li>
           <li><a href="">洗护</a></li>
           <li><a href="">童婴</a></li>
           <li><a href="">杂货</a></li>
           <li><a href="">饮食</a></li>
           <li><a href="">其他</a></li>
           <li><a href="">专题</a></li>
           <li><a href="">甄选家</a></li>
       </ul>
   </div>
   <!--购买详情-->
   <div class="cl"></div>
   <div id="sp_details">
        <p>首页&gt;居家&gt;舒坐&gt;典雅美式全棉刺绣抱枕</p>
        <div id="sp_show"><img src="img/details3.jpg" alt=""></div>
        <div id="sp_img">
            <ul>
                <li><img src="img/details3.jpg" alt=""></li>
                <li class="sp_tl"><img src="img/details2.png" alt=""></li>
                <li><img src="img/details4.jpg" alt=""></li>
                <li><img src="img/details5.jpg" alt=""></li>
                <li><img src="img/details6.jpg" alt=""></li>
            </ul>
        </div>
        <div id="sp_text">
            <p>典雅美式全棉刺绣抱枕</p>
            <h4>典雅毛线绣，精致工艺</h4>
            <div id="sp_1">
                <p>售价：<b>¥59.00</b></p>
                <p class="sp_p1">促销：<b>38特惠全场</b> 3重礼 新品买2送1</p>
                <p class="sp_p1">服务：&bull;30天无忧退货	&bull;48小时快速退款 	&bull;满88元免邮费 	&bull;网易自营品牌</p>
            </div>
            <ul id="img_num" style="padding-top: 30px;">
                <li id="img_num_a">款式：</li>
                <li><img src="img/dc1.png" alt=""></li>
                <li><img src="img/dc2.png" alt=""></li>
                <li><img src="img/dc3.png" alt=""></li>
                <div id="img_add">
                    <span class="img_add_a" style="margin-right: 60px;">数量:</span>
                    <span class="img_add_a img_add_c img_add_d">-</span>
                    <span class="img_add_b img_add_d">1</span>
                    <span class="img_add_a img_add_c img_add_d">+</span>
                </div>
            </ul>
            <div id="btn_all">
                <div class="btn btn1">立即购买</div>
                <div class="btn btn2">加入购物车</div>
            </div>
        </div>
       <!--更多选择-->
   <div class="catalogue">
       <div class=" catalogue-title">
           <p  style="float: left">大家都在看</p>
       </div>
       <div class=" catalogue-content">
           <ul>
               <li><img src="img/look1.png" alt="">
                   <p>日式色织水洗条纹抱枕</p>
                   <span>￥59.00</span>
                   <div class="catalogue-content-choose">
                       <p>3色可选</p>
                   </div>
               </li>
               <li><img src="img/look2.png" alt="">
                   <p>日式纯色水洗亚麻抱枕</p>
                   <span>￥79.00</span>
                   <div class="catalogue-content-choose">
                       <p>4色可选</p>
                   </div>
               </li>
               <li><img src="img/look3.png" alt="">
                   <p>300根全羽绒抱枕芯</p>
                   <span>￥39.00</span>
               </li>
               <li><img src="img/look4.png" alt="">
                   <p>3D纯棉护颈波浪记忆枕</p>
                   <span>￥119.00</span>
               </li>
           </ul>
       </div>
   </div>
       <!--详情-->
   <div class="introduce">
       <div class="introduce-left">
           <div class="introduce-nav">
               <ul>
                   <li>详情</li>
                   <li>评价</li>
               </ul>
           </div>
           <div class="introduce-content">
               <div class="introduce-content-top">
                   <ul>
                       <li class="li-1">
                           <span>尺寸</span>
                           <span class="introduce-color">45cm*45cm</span>
                           <span>面料成分</span>
                           <span class="introduce-color">100%全棉</span>
                       </li>
                       <li class="li-2">
                           <span>内芯面料</span>
                           <span class="introduce-color">100%全棉</span>
                           <span>填充物</span>
                           <span class="introduce-color">100%聚酯纤维</span>
                       </li>
                       <li class="li-3">
                           <span>重量</span>
                           <span class="introduce-color">470g内芯</span>
                           <span>产地</span>
                           <span class="introduce-color">中国</span>
                       </li>
                   </ul>
               </div>
               <div class="introduce-content-bottom">
                    <img src="img/p-1.jpg">
               </div>
           </div>
       </div>
        <div class="introduce-right">
            <div class="introduce-right-title">
                <p>专题推荐</p>
            </div>
            <div class="introduce-right-content">
                <ul>
                    <li>
                        <img src="img/tj1.jpg">
                        <div class="introduce-right-content-title">
                            好东西不应该只用来凑单
                        </div>
                    </li>
                    <li>
                        <img src="img/tj2.jpg">
                        <div class="introduce-right-content-title">
                            少女心，只过少女节
                        </div>
                    </li>
                    <li>
                        <img src="img/tj3.jpg">
                        <div class="introduce-right-content-title">
                            甄选家报告大集结
                        </div>
                    </li>
                    <li>
                        <img src="img/tj4.jpg">
                        <div class="introduce-right-content-title">
                            超实用厨房小工具
                        </div>
                    </li>
                    <li>
                        <img src="img/tj5.jpg">
                        <div class="introduce-right-content-title">
                            严选陪你改变人生
                        </div>
                    </li>
                </ul>
            </div>
        </div>
   </div>
       <!--固定导航-->
       <div class="fixed-nav">
           <ul>
               <li>
                   <img src="img/fixed-1.jpg">
               </li>
               <li>
                   <a href="">
                       <div class="fixed-nav-1"></div>
                       <p>新人有礼</p>
                   </a>

               </li>
               <li>
                   <a href="">
                       <div class="fixed-nav-2"></div>
                       <p>下载</p>
                   </a>
               </li>
               <li>
                   <a href="">
                       <div class="fixed-nav-3"></div>
                       <p>在线客服</p>
                   </a>

               </li>
           </ul>
       </div>
</body>
</html>